<template>
  <uni-list v-if="data">
    <uni-list-item title="交易地址" :rightText="data.address" />

    <uni-list-item title="交易描述" :rightText="data.message" />

    <uni-list-item title="交易类型">
      <template #footer>
        <image class="type-icon" :src="`/static/icon_${data.type}.png`" />
      </template>
    </uni-list-item>

    <uni-list-item
      title="联系方式"
      :rightText="data.contact"
      clickable
      @click="handleClick"
    />

    <!-- <uni-list-item title="联系方式">
      <template #footer>
        <view @click="handleClick">{{ data.contact }}</view>
      </template>
    </uni-list-item> -->
  </uni-list>

  <button @click="jump">Edit</button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 详情数据
const data = ref<API.Trade | null>(null);

// 获取数据
const refresh = async (id: string) => {
  const { data: resp } = await uni.request({
    url: `http://127.0.0.1:3000/trades/${id}`,
    method: "GET",
  });

  // 赋值
  data.value = resp as API.Trade;
};

const handleClick = () => {
  if (!data.value) return;

  uni.makePhoneCall({
    phoneNumber: data.value.contact,
  });
};

/** 跳转到详情页面 */
const jump = () => {
  uni.navigateTo({
    url: "/pages/edit/edit?id=" + data.value?.id,
    events: {
      refresh,
    },
  });
};

onLoad((query) => {
  // 1. 获取携带到当前页面的 id 参数
  const { id } = query as { id: string };
  // 2. 调用 refresh
  refresh(id);
});
</script>

<style lang="scss">
.type-icon {
  width: 40rpx;
  height: 40rpx;
}

// .box {
//   width: 200rpx;
//   height: 100rpx;
//   background-color: #ccc;
// }

// .box:active {
//   background-color: red;
// }
</style>
